<%@include file="/WEB-INF/jsp/include/importAndtag.inc"%>
<%@ page contentType="text/html; charset=UTF-8" %>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Cache-Control" content="no-cache" />
	
	<style type="text/css">
		.form_title{
			margin-top:50px;
			background:#eee;
			padding:20px;
			text-align:center;
			font-size: 24px;
			font-weight: bold;
		}
		.form_content{
			text-align: center;
		}
	</style>
	<title><s:text name="ApplicationAndModules"/></title>
	<%@include file="/WEB-INF/jsp/include/pageHeader.inc"%>
    <script type="text/javascript">
    	
    	$(function(){
    		var currentDate = new Date();
        	var currentDateStr = currentDate.getFullYear()+"-"+(currentDate.getMonth()+1)+"-"+currentDate.getDate();
        	currentDate.setDate(currentDate.getDate()+30);
        	var trialEndDateStr = currentDate.getFullYear()+"-"+(currentDate.getMonth()+1)+"-"+(currentDate.getDate());
        	$("#currentDate").text(currentDateStr);
        	$("input[name='subscriptionInfo.startDate']").val(currentDateStr);
        	
        	//是否试用
        	$("input[name='trial']").click(function(){
        		if($(this).val() == "1"){
        			$("#totalPrice").text(0.00);
        			$("#userCount").val(1).attr("disabled","true").css("color","#ccc");
        			$("#subPeriod").val("").attr("disabled","true").css("color","#ccc");
        			$("#endDate").text(trialEndDateStr);
            		$("input[name='subscriptionInfo.endDate']").val(trialEndDateStr);
        		}else{
        			$("#userCount").val("").removeAttr("disabled").css("color","");
        			$("#subPeriod").removeAttr("disabled").css("color","");
        			$("#endDate").text("");
            		$("input[name='subscriptionInfo.endDate']").val("");	
        		}
        	});
    	});
    	
    	function showEndDate(){
    		changePrice();
    		var monthNum = $("#subPeriod").val();
    		if($.trim(monthNum).length > 0){
    			var endDate = new Date();
        		endDate.setMonth(endDate.getMonth()+parseInt(monthNum));
        		var endDateStr = endDate.getFullYear()+"-"+(endDate.getMonth()+1)+"-"+endDate.getDate();
        		$("#endDate").text(endDateStr);
        		$("input[name='subscriptionInfo.endDate']").val(endDateStr);
    		}else{
    			$("#endDate").text("");
        		$("input[name='subscriptionInfo.endDate']").val("");
    		}
    	}
    	
    	function changePrice(){
    		var totalPrice="";
    		$("#module_table tr").each(function(i,ele){
    			totalPrice = 0.00;
    			var bPrice = parseInt($("#bPrice-"+i).text());
    			var pricePeriod = parseInt($("#bPeriod-"+i).text());
    			
				var userCount = $("#userCount").val()==""?0:$("#userCount").val();
       			var period = $("#subPeriod").val()==""?0:$("#subPeriod").val();
       			
       			totalPrice += parseInt(period)/pricePeriod*bPrice*parseInt(userCount);
       			totalPrice = CurrencyFormatted(totalPrice);
    		});
    		
    		$("#totalPrice").text(totalPrice);
    	}
    </script>
  	</head>
	<body style="background:#F5F5F5;">
		<%@include file="../include/bodyHeader.inc" %>
		<%@include file="../include/navigationMenu.inc" %>
		<div class="mian-content">
			<div class="mainArea">
				<div class="form_title">
					<span><s:text name="subscriptionInfo" /></span>
				</div>
				<div class="form_content">
					<table id="module_table">
						<s:iterator value="#session.moduleList" var="module" status="i">
							<tr id="module-${i.index }" >
								<td id="bPrice-${i.index }" ><s:property value='#module.modulePrice.price'/></td>
								<td id="bUnit-${i.index }" ><s:property value='#module.modulePrice.priceUnit.fullName'/></td>
								<td id="bPeriod-${i.index }" class=""><s:property value='#module.modulePrice.pricePeriod.shortName'/></td>
							</tr>
						</s:iterator>
					</table>
					<form action="${pageContext.request.contextPath}/subscription/subscripInfo.action" >
						<table style="margin:20px auto;width: 300px;">
							<tr>
								<td><s:text name="userCount"/>:</td>
								<td><input type="text" class="" name="subscriptionInfo.userCount" id="userCount" onblur="changePrice()"/></td>
							</tr>
							<tr>
								<td><s:text name="need30Daystrial"/>:</td>
								<td>
									<input type="radio" class="" name="trial" value="1"/><s:text name="yes"/>
									<input type="radio" class="" name="trial" value="0" checked="checked"/><s:text name="no"/>
								</td>
							</tr>
							<tr>
								<td><s:text name="currentDate"/>:</td>
								<td>
									<input type="hidden" name="subsccriptionInfo.startDate" value=""/>	
									<span id="currentDate"></span>
								</td>
							</tr>
							<tr>
								<td><s:text name="subscribePeriod"/>:</td>
								<td>
									<select id="subPeriod" class="" onchange="showEndDate()">
										<option value=""><s:text name="pleaseSelectPeriod"/></option>
										<s:iterator value="#request.subPeriod" var="sp">
											<option value="<s:property value='#sp.shortName' />" /><s:property value="#sp.fullName"/>
										</s:iterator>
									</select>
								</td>
							</tr>
							<tr>
								<td><s:text name="endDate"/>:</td>
								<td>
									<span id="endDate"></span>
									<input type="hidden" name="subscriptionInfo.endDate" value=""/>	
								</td>
							</tr>
							<tr>
								<td>
									<s:text name="totalPrice"></s:text>:
								</td>
								<td><span id="totalPrice"></span></td>
							</tr>
							<tr>
								<td></td>
								<td></td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>
		<%@include file="../include/pageFooter.inc" %>
	</body>
</html>
